import { createApp } from 'vue'
import pinia from '@/stores/inidex'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import 'animate.css'
// 导入VR特效CSS
import './assets/vr-effects.css'
// 导入VR特效JS
import { initVREffects } from './assets/vr-effects.js'

import App from './App.vue'
import router from './router'
import vrhover from './directives/vrhover'

const app = createApp(App)

// 全局注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 添加 v-intersect 自定义指令
app.directive('intersect', {
  mounted(el) {
    // 简单版本：直接应用动画而不使用交叉观察器
    // 这是一个降级方案，解决当前的错误
    if (el.classList.contains('animate__animated')) {
      // 允许CSS动画正常工作
      // 无需隐藏和显示元素
    }
  },
})

app.directive('vrhover', vrhover)

app.use(pinia)
app.use(router)
app.use(ElementPlus)

app.mount('#app')

/* eslint-disable no-undef */
// 页面加载完成后初始化VR特效
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    initVREffects('app')
  }, 1000) // 延迟1秒，确保所有DOM元素都已加载
})
/* eslint-enable no-undef */
